<template>
  <div>
    <div class="fullBut" @click="fullscreen">
      <div class="uss">
        <span class="nius"><i class="iconfont icon-quanping"></i></span>
      </div>
    </div>
  </div>
</template>
<script>
import screenfull from "screenfull";
export default {
  name: "test",
  data() {
    return {
      screenfullBut: false, // 全屏按钮
    };
  },
  methods: {
    // 全屏功能
    fullscreen() {
      if (!screenfull.isEnabled) {
        this.$notification.open({
          message: "温馨提示",
          description:
            "您的浏览器无法使用全屏功能，请更换谷歌浏览器或者请手动点击F11按钮全屏展示！",
          duration: 10,
          placement: "bottomLeft",
        });
        return false;
      }
      screenfull.toggle();
      if (screenfull.isFullscreen) {
        this.screenfullBut = false;
      } else {
        this.screenfullBut = true;
      }
    },
  },
};
</script>
<style lang="less" scoped>
    .uss{
      float: left;
    }
    .iconfont{
      height: 30px;
      line-height: 30px;
      font-size: 26px;
      vertical-align: middle;
    }
</style>
